import React, {useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import * as IconMould from "@ant-design/icons";
import {
  Button,
  Layout,
  Dropdown,
  Space,
  Typography,
  Avatar,
  theme,
} from "antd";
/**
 * @date: 2024-07-14 00:03:41
 * @description: 引入react-redux某些钩子函数
 * useDispatch: useDispatch 是 React Redux 提供的另一个自定义 Hook，用于在函数组件中访问 Redux store 的 dispatch 函数。通过 useDispatch，你可以在函数组件中派发（dispatch）Redux actions，从而触发状态的更新。
 * @author: Forever丿顾北
 **/
import { useDispatch } from "react-redux";
/**
 * @date: 2024-07-14 00:16:44
 * @description: 引入对应模块的方法
 * CollapseMenu: 修改导航收起与展开状态的方法
 * @modifyContent:
 * @author: Forever丿顾北
 **/
import { CollapseMenu, setLogOutClear } from "@store/reducers/MenuSlice";

const { Header } = Layout;

// 创建组件, 使用 hooks
/**
 * @date: 2024-07-13 23:55:11
 * @description: 参数说明
 * CollapseStart: 菜单的展开/收起参数
 * @modifyContent:
 * @author: Forever丿顾北
 **/
const HeaderComponentsIndex = ({ CollapseStart }) => {
  const [collapsed] = useState(false);
  const [userName, setUserName] = useState('');
  const [userAvatar, setUserAvatar] = useState('');
  const { token: { colorBgContainer }} = theme.useToken();
  /**
   * @date: 2024-07-14 00:06:23
   * @description: 创建Dispatch
   * @modifyContent:
   * @author: Forever丿顾北
   **/
  const Dispatch = useDispatch();
  const navigate = useNavigate(); // 在函数组件内部使用 useNavigate

  /**
   * @date: 2024-07-13 20:04:54
   * @description: 头像下拉菜单
   * @modifyContent:
   * 1. PersonalCenter : 个人中心事件
   * 2. Logout : 退出登录事件
   * @author: Forever丿顾北
   **/
  const PersonalCenter = (event) => {
    console.log("个人中心", event);
  };
  
  const LogOut = () => {
    console.log("退出登录");
    // window.localStorage.removeItem("token");
    // window.localStorage.removeItem("userInfo");     
    window.localStorage.clear()
    Dispatch(setLogOutClear());
    navigate("/login");
  };

  const AvatarDropdownItems = [
    {
      key: "1",
      label: "个人中心",
      onClick: PersonalCenter,
    },
    {
      key: "2",
      label: "退出",
      onClick: LogOut,
    },
  ];
  

  /**
   * @date: 2024-07-13 23:35:33
   * @description: 菜单展开/收起方法
   * @modifyContent:
   * @author: Forever丿顾北
   **/
  const setCollapsed = () => {
    // 1. 获取菜单状态初始值
    console.log("CollapseStart", CollapseStart);
    Dispatch(CollapseMenu(CollapseStart));
  };
  
  /**
   * @date: 2024-10-10 17:21:21
   * @description: useEffect可以接受两个参数：一个函数和一个可选的依赖数组。该函数会在组件挂载后执行（首次渲染前），并在每次依赖数组中的值发生变化时重新执行。这使得它非常适合处理那些需要在组件生命周期的不同阶段进行的副作用操作。
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  useEffect(() =>{
    if (JSON.parse(window.localStorage.getItem('userInfo'))) {
      setUserName(JSON.parse(window.localStorage.getItem('userInfo')).userName)
      setUserAvatar(JSON.parse(window.localStorage.getItem('userInfo')).userAvatar)  
    } else {
      window.localStorage.clear()
      Dispatch(setLogOutClear());
      navigate("/login");
    }
    
  }, [userName, userAvatar])
  return (
    <div>
      <Header id='Header' style={{ padding: 0, background: colorBgContainer }}>
        <Button
          className='margin_left'
          type='text'
          icon={
            collapsed ? (
              <IconMould.MenuUnfoldOutlined />
            ) : (
              <IconMould.MenuFoldOutlined />
            )
          }
          onClick={() => setCollapsed()}
        />
        <div className='user_name margin_right'>
          <Avatar size={40} src={userAvatar} className='margin_right' />
          <Dropdown
            menu={{ items: AvatarDropdownItems }}
            placement='bottomLeft'
            arrow
            trigger={["click"]}
          >
            <Typography.Link>
              <Space>
                <h5 className='margin_bottom_clear'>{userName}</h5>
                <IconMould.DownOutlined className='margin_right text_align' />
              </Space>
            </Typography.Link>
          </Dropdown>
        </div>
      </Header>
    </div>
  );
};

export default HeaderComponentsIndex;
